<!--
 * @Description: 学习中心
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-11-27 10:08:41
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-27 10:36:18
-->
<template>
    <div class="containers-warp">
        <div class="images-title">
            <img src="/images/example/LearningCenter.png" alt="" />
        </div>

        <div class="containers">
            <div class="nav">
                <div class="nav-title">
                    <div
                        class="item"
                        :class="index === navTitle_Active ? 'active' : ''"
                        v-for="(item, index) in navTitle"
                        :key="index"
                        @click="select_navTitle(index)"
                    >
                        <img :src="item.img" alt="" />
                    </div>
                </div>
                <div class="nav-body">
                    <div
                        class="item"
                        :class="index === subject_active ? 'active' : ''"
                        v-for="(item, index) in subject_list"
                        :key="index"
                        @click="select_nav(index, item)"
                    >
                        {{ item.name }}
                    </div>
                </div>
            </div>
            <div class="j-body">
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="15" :md="17">
                        <div class="tab-wrap">
                            <div class="tab-nav">
                                <ul>
                                    <li
                                        v-for="(item, index) in tabNav"
                                        :key="index"
                                        :class="
                                            tabNavActive === index
                                                ? 'active'
                                                : ''
                                        "
                                        @click="select_tabNav(index)"
                                    >
                                        {{ item.name }}
                                    </li>
                                </ul>
                            </div>
                            <bar
                                class="item"
                                :title="tabNavTitle"
                                titleSize="max"
                                :icon="true"
                                titleColor="#12BD96"
                            >
                                <div class="question-list">
                                    <div
                                        class="item"
                                        v-for="item in questionList"
                                        :key="item.id"
                                    >
                                        <!-- <nuxt-link
                                            class="item-wrap"
                                            :to="
                                                '/LearningCenter/detail/' +
                                                item.id
                                            "
                                            v-if="item.isFree"
                                        >
                                            <div class="left">
                                                <div class="name">
                                                    {{ item.title }}
                                                </div>
                                                <div class="info">
                                                    <span class="time">{{
                                                        dateFormat(
                                                            item.createTime
                                                        )
                                                    }}</span>
                                                </div>
                                            </div>
                                            <div class="right">
                                                ￥{{ item.price }}
                                            </div>
                                        </nuxt-link> -->
                                        <div class="item-wrap">
                                            <div class="left">
                                                <div class="name">
                                                    {{ item.title }}
                                                </div>
                                                <div class="info">
                                                    <span class="time">{{
                                                        dateFormat(
                                                            item.createTime
                                                        )
                                                    }}</span>
                                                </div>
                                            </div>
                                            <div class="right">
                                                <div class="price">￥{{ item.price }}</div>
                                                <nuxt-link v-if="item.isFree" :to="'/LearningCenter/detail/'+item.id" class="btn plain">查看详情</nuxt-link>
                                                <nuxt-link v-else-if="item.isBuy" :to="'/LearningCenter/detail/'+item.id" class="btn plain">继续刷题</nuxt-link>
                                                <button v-else class="btn plain" @click="purchase(item.id)">立即购买</button>
                                            </div>
                                        </div>
                                    </div>

                                    <no-data v-if="questionList.length ===0"></no-data>
                                </div>
                            </bar>
                            <el-pagination
                                class="pagination"
                                :hide-on-single-page="true"
                                background
                                layout="prev, pager, next"
                                :total="total"
                                :pager-count="5"
                                :page-size.sync="pageSize"
                                @current-change="pageChange"
                            >
                            </el-pagination>
                        </div>
                    </el-col>
                    <el-col :xs="24" :sm="9" :md="7">
                        <!-- 相关课程 -->
                        <relevant-course
                            class="relevant-course"
                            :data="relevantList"
                        ></relevant-course>
                    </el-col>
                </el-row>
            </div>
        </div>
        <log-in :visible.sync="is_pop"></log-in>
    </div>
</template>

<script>
import { getQuestionList,createOrder} from "~/api";
const TYPE = 2; // 订单类型--1.课程 2.题库
export default {
    data() {
        return {
            // 登录组件显示隐藏
            is_pop:false,
            // 题目列表
            questionList: [],
            // 题库大类
            navTitle: [
                {
                    name: "免费题库",
                    img: "/images/Learning_nav1.png",
                    type: 1,
                },
                {
                    name: "收费题库",
                    img: "/images/Learning_nav2.png",
                    type: 0,
                },
            ],
            navTitle_Active: 0,
            // 科目
            subject_list: [],
            subject_active: 0,
            // tab 导航
            tabNav: [
                {
                    name: "全部",
                    type: 0,
                },
                {
                    name: "历年试题",
                    type: 1,
                },
                {
                    name: "模拟试题",
                    type: 2,
                },
                {
                    name: "每日一练",
                    type: 4,
                },
            ],
            tabNavActive: 0,
            // 历年题目
            list: [],
            // 相关课程
            relevantList: [],
            // 分页
            page: 1,
            pageSize: 20,
            total: 0,
        };
    },
    computed: {
        // topicType 1.历年试题 2. 模拟试题 3. 单题 4.每日一练
        topicType() {
            return this.tabNav[this.tabNavActive].type;
        },
        // 科目id
        subjectId() {
            return this.subject_list[this.subject_active].id;
        },
        // 是否为收费题库
        isFree() {
            return this.navTitle[this.navTitle_Active].type;
        },
        // tab标题
        tabNavTitle() {
            return this.tabNav[this.tabNavActive].name;
        },
        // 用户信息
        user(){
            return this.$store.state.user
        },
        // 是否登录
        isLogin(){
            return this.$store.state.isLogin
        }
    },
    async asyncData({ app }) {
        // 好课推荐
        let getRecommendList = app.$axios
            .$get(`/edu/course/courseRecommend`)
            .then((res) => {
                if (res.code === 0) {
                    return res.data;
                }
            });

        // 获取科目导航
        let subject_list = await app.$axios
            .$get("/edu/course/classList")
            .then((res) => {
                if (res.code === 0) {
                    return res.data;
                }
            });
        // 总页数
        let total = 0;
        // 获取题库列表
        let questionList = await app.$axios
            .$get("/edu/question/list", {
                params: {
                    topicType: 0,
                    subjectId: subject_list[0].id,
                    isFree: 1,
                    page: 1,
                    pageSize: 20,
                },
            })
            .then((res) => {
                if (res.code === 0) {
                    total = res.data.total;
                    return res.data.list;
                }
            });

        let relevantList = await getRecommendList;

        return {
            relevantList,
            subject_list,
            questionList,
            total,
        };
    },
    methods: {
        // 免费收费切换
        select_navTitle(index) {
            this.navTitle_Active = index;
            this.subject_active = 0;
            this.page = 0;
            this._getQuestionList();
        },

        // 切换科目
        select_nav(index, item) {
            this.subject_active = index;
            this.page = 0;
            this._getQuestionList();
        },

        // 历年、模拟、每日试题切换
        select_tabNav(index) {
            this.tabNavActive = index;
            this._getQuestionList();
        },

        // 获取试题列表
        _getQuestionList() {
            getQuestionList(
                this.topicType,
                this.subjectId,
                this.isFree,
                this.page,
                this.pageSize
            ).then((res) => {
                if (res.data.code === 0) {
                    this.questionList = res.data.data.list;
                    this.total = res.data.data.total;
                }
            });
        },
        // 购买课程
        purchase(id){
            if(this.isLogin){
                createOrder(this.user.phone,this.user.nickName,id,TYPE).then(res=>{
                    if(res.data.code === 0){
                        this.$router.push('/payment/'+res.data.data)
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            }else{
                // 如果没有登录，去登录
                this.is_pop = true
            }
            
        },
        // 页数改变
        pageChange(page) {
            this.page = page;
            this._getQuestionList();
        },
    },
};
</script>

<style lang="scss" scoped>
.images-title {
    width: 100%;
    height: 0;
    padding-bottom: 21%;
    overflow: hidden;
}

.j-body {
    margin-top: 20px;
    margin-bottom: 50px;
}
.nav {
    display: flex;
    background-color: #fff;
    margin-top: 20px;
    .nav-title {
        flex: 0 0 216px;
        .item {
            cursor: pointer;
            position: relative;
            img {
                width: 100%;
            }
            &.active::before {
                content: "";
                display: block;
                width: 0;
                height: 0;
                border-top: 10px solid transparent;
                border-right: 14px solid #fff;
                border-bottom: 10px solid transparent;
                position: absolute;
                top: 25px;
                right: 0;
            }
        }
    }
    .nav-body {
        display: flex;
        flex-wrap: wrap;
        padding: 20px 10px 0 20px;
        .item {
            padding: 0 10px;
            height: 30px;
            line-height: 30px;
            color: #999999;
            font-size: 14px;
            border: 1px solid #dddddd;
            border-radius: 2px;
            margin: 0 10px 20px 0;
            text-align: center;
            cursor: pointer;
            &:hover,
            &.active {
                color: #12bd96;
                border-color: #12bd96;
            }
        }
    }
}
.tab-wrap {
    .tab-nav {
        margin-bottom: 20px;
        ul {
            display: flex;
            li {
                font-size: 14px;
                color: #666666;
                height: 30px;
                line-height: 30px;
                padding: 0 27px;
                cursor: pointer;
                &.active {
                    color: $--color-primary;
                    background-color: #ddf0f1;
                }
                &:hover {
                    color: $--color-primary;
                }
            }
        }
    }
}
.learning_list {
    .item {
        & + .item {
            margin-top: 20px;
        }
    }
}
.question-list {
    .item {
        .item-wrap {
            display: flex;
            justify-content: space-between;
            .left {
                .name {
                    font-size: 20px;
                }
                .info {
                    margin-top: 10px;
                    span {
                        font-size: 16px;
                    }
                }
            }
            .right {
                display: flex;
                .price{
                    font-size: 28px;
                    color: #f93e3e;
                }
                .btn{
                    font-size: 16px;
                    min-width: 100px;
                    height: 35px;
                    margin-left: 20px;
                }
            }
        }
        & + .item {
            margin-top: 20px;
        }
    }
}
.pagination {
    margin-top: 20px;
}
@media screen and (max-width: 760px) {
    .images-title {
        width: 100%;
        height: 0;
        padding-bottom: 21%;
        overflow: hidden;
    }

    .j-body {
        margin-top: 2.632vw;
        margin-bottom: 6.579vw;
    }
    // 题库导航
    .nav {
        flex-direction: column;
        .nav-title {
            flex: 0;
            display: flex;
            .item {
                flex: 1;
                &.active::before {
                    border-top: 0;
                    border-left: 2.316vw solid transparent;
                    border-right: 2.316vw solid transparent;
                    border-bottom: 2.842vw solid #fff;
                    top: auto;
                    bottom: 0;
                    right: 20vw;
                }
            }
        }
    }
}
</style>
